var map;

var customIcons = {};
customIcons["red"] = createIcon('red');
customIcons["blue"] = createIcon('blue');
customIcons["green"] = createIcon('green');
customIcons["yellow"] = createIcon('yellow');
var markerGroups = { "red": [], "blue": [],"green": [], "yellow": []};

function createIcon(color)
{
  var icon = new GIcon(); 
  icon.image = 'http://labs.google.com/ridefinder/images/mm_20_'+color+'.png';
  //icon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
  icon.iconSize = new GSize(9, 15);
  //icon.shadowSize = new GSize(22, 20);
  icon.iconAnchor = new GPoint(6, 20);
  //icon.transparent = new 
  icon.infoWindowAnchor = new GPoint(5, 1);
  return icon;
}

function loadMap(path, color)
{
  GDownloadUrl(path, function(data) {	
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++)
  {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));				
    var marker = createMarker(point, color);
    map.addOverlay(marker);				
    marker.hide(); 
    }
  });
}
  
function load()
{
  if (GBrowserIsCompatible())
  {		
    map = new GMap2(document.getElementById("map"));
    map.disableDragging();
    map.disableDoubleClickZoom();
    map.disableInfoWindow();
    map.disableScrollWheelZoom();
//    map.enablePinchToZoom();
    console.log("pinch to zoom: "+map.pinchToZoomEnabled());
    map.disablePinchToZoom();
	
    /*this makes the center of the map in Austin and sets zoom level 0-19*/
    map.setCenter(new GLatLng(30.30, -97.70), 12);

    loadMap('data/data.xml', 'red');
    loadMap('data/data-repeat.xml', 'blue');
    loadMap('data/data2.xml', 'green');
    loadMap('data/data3.xml', 'yellow');
  }
}

function createMarker(point, type)
{
  var marker = new GMarker(point, customIcons[type]);
  markerGroups[type].push(marker);
  var html = "<b>test</b> <br/>";
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
    
  return marker;
}
	
function toggleGroup(type)
{
  console.log('type = ' +type);
  console.log('length is ' + markerGroups[type].length);
  for (var i = 0; i < markerGroups[type].length; i++)
  {       
    var marker = markerGroups[type][i];
    if (marker.isHidden())
    {
      marker.show();
    }
    else
    {
      marker.hide();
    }
  } 
}
